<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-19 11:57:11
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-08 17:33:12
 * @FilePath: \nien-vue3-admin\src\views\finance\receiverManame\reconciliationManagement\Receivable\collectionManage\billing\components\invoiceMakeDialog.vue
 * @Description: 开票弹窗
-->
<template>
  <el-dialog 
    v-model="visible"
    title="开票"
    :rules="rules"
    :before-close="cancel"
  >
    <el-form ref="formRef" :model="formData">
      <el-form-item label="发票号码" prop="ab">
        <el-input v-model="formData.ab"></el-input>
      </el-form-item>
      <el-form-item label="开票日期" prop="cd">
        <el-date-picker v-model="formData.cd" value-format="YYYY-MM-DD"></el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <div>
        <el-button type="info" @click="cancel">取消</el-button>
        <el-button type="primary" :loading="loading" @click="confirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineEmits, reactive, defineExpose } from 'vue'

// const emits = defineEmits(['success'])
const formRef = ref(null)
const visible = ref<boolean>(false)   
const loading = ref<boolean>(false)   
const formData = reactive({
  ab: '',
  cd: '',
})

const rules = {
  ab: [{ required: true, message: '请输入发票号码！', trigger: 'blur' }],
  cd: [{ required: true, message: '请选择开票日期！', trigger: 'blur' }],
}

const cancel = () => {
  formRef.value && formRef.value.resetFields()
  visible.value = false
}
const confirm = () => {
  loading.value = true

  // fn().then(res => {
  //   if (res.code === 200) {
  //     ElMessage.success('操作成功！')
  //     emits('success')
  //   }
  // }).finally(() => {
  //   loading.value = false
  // })
}

defineExpose({
  visible,
})
</script>